<template>
    <div class="page" data-page="mineMsg" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">个人信息</div>
        </div>
        <div class="page-content">
            <div class="list links-list no-hairline-top" style="padding: 15px 0px;margin: 0;">
                <ul>
                    <li class="mine_li">
                        <a href="JavaScript;" class="link" style="height: 100%;padding-left: 0px;"return false;>
                            <img src="{{staticPath}}img/mine/defaulticon.png" id="mycon_mine" class="myicon">
                        </a>
                        <div class="up_cus" id="upLoadImagesContainer">
                            <div id="upLoadPickfiles"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="list simple-list no-hairlines mine-list">
                <ul>
                    <li>
                        <div style="width: 50%">
                            真实姓名
                        </div>
                        <div class="context_div" id="name_mine">

                        </div>
                    </li>
                    <li>
                        <div style="width: 50%">
                            角色
                        </div>
                        <div class="context_div" id="role_mine">

                        </div>
                    </li>
                    <li>
                        <div style="width: 50%">
                            账号
                        </div>
                        <div class="context_div" id="username_mine">

                        </div>
                    </li>
                </ul>
            </div>

            <div class="list links-list no-hairlines mine-list">
                <ul>
                    <li>
                        <a href="/newPhoneNum/" class="item-link item-content" data-view=".view-main">
                                <div class="item-title">手机号</div>
                                <div class="item-after" id = "telNo_mine" style="color:black"></div>
                        </a>
                    </li>
                    <li>
                        <a href="/modPassWord/" class="item-link item-content" data-view=".view-main">
                            <div class="item-title">修改密码</div>
                            <div class="item-after"></div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="list simple-list no-hairlines mine-list"  style="display: none">
                    <ul>
                        <li>
                            <div style="width: 50%">
                                微信
                            </div>
                            <div class="context_div">
                                <label class="toggle toggle-init">
                                <input id="wx_checkbox" type="checkbox">
                                <span class="toggle-icon"></span>
                            </label>
                            </div>
                        </li>
                    </ul>
            </div>
        </div>
    </div>
</template>
<script>
    return {
         mounted() {
             if (userInfor.headUrl&&userInfor.headUrl.length>0){
                $(".myicon").attr("src",userInfor.headUrl);
             }
             common.upload_qiniu_heard(function (picUrl) {
                 //图片url添加到数组里
                 $(".myicon").empty()
                 $(".myicon").attr("src", picUrl);
                 Dao.mdHeadUrl({
                     userName: userInfor.accountName,
                     deviceId: appKeyObj.deviceId,
                     dataType:1,
                     imgUrl:picUrl,
                 },function (data) {
                    userInfor.headUrl=picUrl;
                    native.setUserInfor(userInfor);
                 },true);
             },false);
              //判断是否微信绑定的
              var state = true;
              $("#wx_checkbox").attr("checked",state);

              $("#wx_checkbox").change(function() {
                   if (state) {  //解绑

                   } else { //绑定 调用微信绑定页面

                   }
              });
              $("#name_mine").append(common.transNullundefinedToline(userInfor.name));
              for (var i = 0;i < userInfor.role.length;i++) {
                  $("#role_mine").append(common.transNullundefinedToline(" "+userInfor.role[i].name));
              }
              $("#username_mine").append(common.transNullundefinedToline(userInfor.accountName));
              $("#telNo_mine").html(userInfor.phone);
            },
        // Component Methods
        on:{
            pageAfterIn: function(){
                //更改绑定手机
                $("#telNo_mine").html(userInfor.phone);
            }
        }
    }
</script>
<style scoped>
#upLoadPickfiles{
  width: 100%;
  height: 90px;
}
.up_cus {
    height: 90px;
    margin-top: -76px;
    z-index: 2;
}
.inp_cus {
     width: 100%;
     height: 90px;
 }
.title{
    padding-right: 56px;margin: 0px auto;
}
.mine_li{
    height: 60px ;width: 100%
    }
.myicon {
    width: 60px;height: 60px;margin-left: 24.5px;border-radius: 60px;
    }
.context_div{
    width: 50%;text-align: right;
    }
.mine-list{
    margin: 0px 0px;
    margin-top: 1px;
 }
.mine-list a:after{
    height:0px !important;
}
.mine-list li:after{
    height:0px !important;
}
.md .list ul:after{
    height: 0px;
}
 .list ul:after{
    height: 0px;
}
</style>